<template>
  <div class="teambigbox">
    <div class="liftbox">
       <el-input size="small"  placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <el-tree
        class="filter-tree"
        style="margin-top: 10px;"
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
          @node-click="handleNodeClick"
        :filter-node-method="filterNode"
        ref="tree">
        <template slot-scope="{ node, data }">
           <span :style="{cursor: data.type=='3' ? 'pointer' : 'no-drop', fontSize: '14px'}">{{ node.label }}</span>
        </template>
      </el-tree>
    </div>
    <div class="rightbox">
        <!-- 页面头部搜索栏 -->
        <div class="righttop">
          <div>
            <el-radio-group v-model="radio3" size="small">
              <el-radio-button label="2">月</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
            </el-radio-group>
            <span class="little">
              <el-date-picker v-if="radio3=='2'" v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
              <el-date-picker v-else v-model="value3" type="year" value-format="yyyy" placeholder="选择年" size="small"></el-date-picker>
            </span>

          </div>
          <div>
            <el-button size="small" @click="chongzhi">重 置</el-button>
            <el-button type="primary" size="small" @click="submit">查 询</el-button>
          </div>
      </div>
      <div class="rightbodybox">
        <!-- 导出部分 -->
        <div class="top">
          <div>
            <span>指标：</span>
            <span>
              <el-radio-group v-model="radio" @change="getechartslist">
                <el-radio label="1">单位产品能耗</el-radio>
                <el-radio label="2">万元产值能耗</el-radio>
                <el-radio label="3">生产效率</el-radio>
              </el-radio-group>
            </span>
          </div>
          <div class="butti">
            <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
          </div>
        </div>
        <!-- 图表盒子 -->
        <div class="echartbox" ref="echartbox"></div>
        <!-- 表格盒子 -->
        <div class="tablebox">
          <TableColumn ref="tabledata"
              :issize="issize"
              :tableData="tableData" 
              :tableConfig="tableConfig">
            </TableColumn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getkaohetreelistapi,getkaohetubiaoapi,getkaohetableapi} from '@/api/energy-consumption/factory-energy/ProductionIndicators'
import * as echarts from 'echarts';
import TopTile from '@/components/TopTitle/index.vue'
import { exportexcel } from '@/utils/excel'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      radio:'1',
      radio3: '2',
      value2:'',
      value3:'',
      issize:'medium',
      filterText: '',
      tableData:[],
      tableConfig: [
        {label:'序号',type:'index',width:'50',center:'center'},
        { label: '班组', prop: 'teamName' },
        { label: '日期指标', prop: 'produceDate', center: 'center' },
        {label:'时间段',prop:'timeRange',center:'center'},
        {label:'产品',prop:'productName'},
        {label:'电量(kWh)',prop:'actualEnergyValue'},
        {label:'产量(元)',prop:'actualValue'},
        {label:'单位产品能耗(kWh/元)',prop:'perProductEnergyValue',center:'right'},
        { label: '合理值(kWh/元)', prop: 'perProductReasonableValue', center: 'right' },
        {label:'产值(万元)',prop:'outputValue'},
        {label:'万元产值能耗(kWh/万元)',prop:'perOutputEnergyValue',center:'right'},
        {label:'合理值(kWh/元)',prop:'outputReasonableValue',center:'right'},
        {label:'生产效率',prop:'produceEfficiency',center:'right'},
      ],
      data: [],
      defaultProps: {
       children: 'sonList',
       label: 'name'
      },
      treevalue:{}
    };
  },

  async mounted() {
    this.gettime()
    const { data: { entity: { sonList } } } = await getkaohetreelistapi()
    this.data=sonList
  },

  methods: {
    // 查询
    submit() {
      if (!this.treevalue.id) return this.$message.warning('请先选择')
      this.getechartslist()
      this.gettablelist()
    },
    // 树节点点击
    handleNodeClick(val) {
      this.treevalue = val
      if(val.type=='3') this.submit()
    },
    // 获取图表数据
    async getechartslist() {
      const treeId=this.treevalue.id.substring(1)
      const { data: { list } } = await getkaohetubiaoapi({
        dateString: this.radio3 == '2' ? this.value2 : this.value3, dateType: this.radio3,
        treeId:treeId,type:this.radio
      })
      this.getlineech(list)
    },
    // 获取表格数据
    async gettablelist() {
      this.$refs.tabledata.loading = true
      const treeId=this.treevalue.id.substring(1)
      const { data: { list } } = await getkaohetableapi({
        dateString: this.radio3 == '2' ? this.value2 : this.value3, dateType: this.radio3,
        treeId:treeId,
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 重置
    chongzhi() {
      this.radio3 = '2'
      this.gettime()
      this.submit()
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 获取折线图
    getlineech(list) {
      var chartDom = this.$refs.echartbox
      var myChart = echarts.init(chartDom);
      var option;
      const timePoints = list[0]?.datalist.map(ele => ele.timeReading)
      const bararr=[]
      const linearr = []
      list.map(ele => {
        if (ele.name == '合理值') {
          ele.datalist.map(ele =>linearr.push( ele.valueReading))
        }else{
          ele.datalist.map(ele =>bararr.push( ele.valueReading))
        }
      })
      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        calculable: true,
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: timePoints
        },
        yAxis:[
          {
            type: 'value',
            name: '元',
            axisLabel: {
                formatter: '{value}'
            }
          }
      ],
        series: [
      {
         name: this.radio=='1'?'单位产品能耗':this.radio=='2'?'万元产值能耗':'生产效率',
         type: 'bar',
         data: bararr
      },
      {
         name: '合理值',
         type: 'line',
         data:linearr
      }
       ]
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表刷新
    shuaxin() {
      this.submit()
      this.$message.success('列表刷新成功')
    },
    //导出
    daochu() {
      const treeId=this.treevalue.id.substring(1)
      exportexcel('ecm-microservice-biz/ecm/factory/energy/produce/team/examine/exportExcel', {
        dateString: this.radio3 == '2' ? this.value2 : this.value3, dateType: this.radio3,
        treeId:treeId,
      },'生产班组考核')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value3 = year.toString()
      this.value2 = year + '-' + month
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
};
</script>

<style scoped>
.teambigbox{
  height:100%;
  padding: 10px;
  display: flex;
  .liftbox{
    width: 300px;
    padding: 15px;
    background-color: #fff;
    margin-right: 10px;
    .suosuo{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .button{
        width: 60px;
        height: 30px;
        color: #fff;
        background-color: #1890ff;
        border: none;
        border-radius: 3px;
      }
    }
  }
  .rightbox{
    width: calc(100% - 310px);
    .righttop{
      height: 80px;
      line-height: 80px;
      padding: 0 20px;
      background-color: #fff;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .little{
        margin:0 20px 0 10px;
      }
    }
    .rightbodybox{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .checkbox{
        height: 42px;
      }
      .top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .butti{
          display: flex;
          align-items: center;
        }
      }
      .tablebox ,.echartbox{
        height: 47.5%;
      }
    }
  }
}
</style>